<template>
  <div class="social-media-chart-container">
    <div class="title">Morning Briefing</div>
    <div class="briefing-content">
      <!-- 亮点部分：数据加载完成前显示骨架屏 -->
      <div class="briefing-section highlight">
        <div class="section-icon">
          <img src="@/assets/light.png" alt="" />
        </div>
        <div class="section-content">
          <div class="section-title" style="color: #2faa68">Highlight</div>
          <div class="section-text" v-if="highlight">
        Great location near metro, friendly staff, and excellent breakfast offerings create a positive experience for guests.
          </div>
          <div v-else-if="showReload" class="error-message">
            数据加载失败，请稍后尝试重新加载
          </div>
          <div v-else class="skeleton-text"></div>
        </div>
      </div>

      <!-- 建议部分：数据加载完成前显示骨架屏 -->
      <div class="briefing-section suggestion">
        <div class="section-icon">
          <img src="@/assets/help.png" alt="" />
        </div>
        <div class="section-content">
          <div class="section-title" style="color: #efb82c">Suggestion</div>
          <div class="section-text" v-if="suggestion">
       Improve the check-in process efficiency and provide more varied in-room dining options to enhance guest satisfaction.
          </div>
          <div v-else-if="showReload" class="error-message">
            数据加载失败，请稍后尝试重新加载
          </div>
          <div v-else class="skeleton-text"></div>
        </div>
      </div>

      <!-- 问题部分：数据加载完成前显示骨架屏 -->
      <div class="briefing-section issue">
        <div class="section-icon">
          <img src="@/assets/error.png" alt="" />
        </div>
        <div class="section-content">
          <div class="section-title" style="color: #ce4049">Issue</div>
          <div class="section-text" v-if="issue">
       Several reviews mentioned poor service quality, including issues with cleaning and responsiveness at the front desk.
          </div>
          <div v-else-if="showReload" class="error-message">
            Data loading failed. Please try reloading later
          </div>
          <div v-else class="skeleton-text"></div>
        </div>
      </div>
    </div>

    <!-- 重新加载按钮 -->
    <!-- <div v-if="showReload" class="reload-container">
      <button class="reload-btn" @click="handleReload">
        重新加载
      </button>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的三个数据（兼容对象和字符串类型）
    highlight: {
      type: [Object, String, null],
      default: null,
    },
    issue: {
      type: [Object, String, null],
      default: null,
    },
    suggestion: {
      type: [Object, String, null],
      default: null,
    },
  },
  data() {
    return {
      timer: null,
      showReload: false,
    };
  },
  mounted() {
    // 启动15秒计时器
    this.timer = setTimeout(() => {
      this.checkDataStatus();
    }, 15000);
  },
  watch: {
    // 监听数据变化，数据加载完成后清除计时器
    highlight() {
      this.checkDataStatus();
    },
    issue() {
      this.checkDataStatus();
    },
    suggestion() {
      this.checkDataStatus();
    },
  },
  methods: {
    // 检查数据状态
    checkDataStatus() {
      // 如果已有数据，清除计时器和提示
      if (
        (this.highlight || this.issue || this.suggestion) &&
        !this.showReload
      ) {
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        return;
      }

      // 如果计时器已触发且数据仍为空，显示重新加载提示
      if (!this.timer && !this.highlight && !this.issue && !this.suggestion) {
        this.showReload = true;
      }
    },
    // 处理重新加载
    handleReload() {
      // 隐藏重新加载提示，显示骨架屏
      this.showReload = false;

      // 通知父组件重新加载数据
      this.$emit("reload-data");

      // 重新启动计时器
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.checkDataStatus();
      }, 15000);
    },
  },
  beforeDestroy() {
    // 组件销毁前清除计时器
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
};
</script>

<style lang="scss" scoped>
.social-media-chart-container {
  box-sizing: border-box;
  margin-top: 20px;
  height: auto;
  min-height: 1.7778rem;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;

  .title {
    margin: 24px 24px 16px;
    font-size: 0.125rem;
    font-weight: 700;
    color: #454545;
  }

  .briefing-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;

    .briefing-section {
      display: flex;
      align-items: center;
      border-radius: 8px;
      overflow: hidden;

      .section-icon {
        margin-left: 10px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .section-content {
        padding: 12px 16px;
        flex: 1;

        .section-title {
          font-size: 0.1111rem;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .section-text {
          font-size: 0.0972rem;
          line-height: 1.5;
          color: #000;
        }

        // 错误提示信息样式
        .error-message {
          font-size: 0.0972rem;
          line-height: 1.5;
          color: #ce4049;
          padding: 5px 0;
        }

        // 骨架屏样式
        .skeleton-text {
          width: 100%;
          height: 30px; // 模拟文本高度
          background: linear-gradient(
            90deg,
            #f7f7f7 25%,
            #f0f0f0 50%,
            #f7f7f7 75%
          ); // 浅灰渐变，降低刺眼感
          background-size: 200% 100%;
          border-radius: 4px;
          animation: skeleton-loading 1.5s infinite; // 加载动画
        }
      }
    }

    .highlight {
      background-color: rgba(7, 240, 17, 0.08);
    }

    .issue {
      background-color: rgba(247, 11, 11, 0.08);
    }

    .suggestion {
      background-color: rgba(243, 176, 7, 0.08);
    }
  }

  // 重新加载按钮样式
  .reload-container {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding: 0 24px;
  }

  .reload-btn {
    padding: 6px 12px;
    background-color: #2faa68;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.0972rem;
    transition: background-color 0.2s;

    &:hover {
      background-color: #278d57;
    }
  }

  // 骨架屏加载动画
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
</style>
